<template>
<div>
	<div class="bang">
			
	</div>
    <div class="d-header">
    	<router-link to="/user" tag="div" class="s-w">
    	</router-link>
    	<li>{{tit}}</li>
    </div>
    <div class="zong">
    	
    
    <div class="d-list">
	    <ul>    	
	    	<li>
	    		<input type="checkbox" />
		    	<span></span>
		    	<p>代发货</p>
	    	</li>
	    	<li v-for="(item, i) in list" :key="i">
	    		<input type="checkbox" />
		    	<span><img class="img" :src="item.pimg" /></span>
		    	<p></p>
	    	</li>
	    </ul>	    		    
	</div>
    
    <div class="h-list" id="shiy">
    	<ul>
    		<li class="h-b-te">
    			宝宝还想要
    		</li>
    		<li v-for="(item, i) in list" :key="i">
    			<div class="h-tu">
					<img class="img" :src="item.pimg" />
				</div>
				<div class="h-desc">
					<span>{{item.pname}}</span>
					<p>￥{{item.pid}}</p>
				</div>
    		</li>
    	</ul>    	
    </div>
    
   </div> 
   <div class="jiesuan">
   	
   </div>   
</div>   
</template>

<script>
import axios from 'axios'
export default {
    name:'Gou',
    data(){
        return{
            tit:'购物车',
            list: "",
        }
    },
    mounted() {
        this.$emit('toparent',this.tit)
        
        var _this=this
	    axios({
	        method:'get',
	        url:"http://jx.xuzhixiang.top/ap/api/productlist.php",
	        params:{uid:'11475'}
	    }).then(function(data){
	          _this.list=data.data.data
	    })
    },
}
</script>

<style scoped>
.jiesuan{
width: 100%;
height: 4.17rem;
line-height:4.7rem;
background-color: rgba(238, 238, 238, 1);
}		
.img{
	height: 100%;
	width: 100%;
}
	
.bang{
background: blanchedalmond;
width:100%;
height: 3.67rem;
}
	
.d-header{
position: relative;
width: 100%;
height: 3.5rem;
line-height: 3.5rem;
background-color: rgba(232, 231, 231, 1);
text-align: center;
font-size: 1.4rem;
font-family: Arial;
display: flex;
justify-content: center;
align-items: center;
}
.d-header li{	
width: 11.92rem;
height: 3.5rem;
color: rgba(100, 100, 100, 1);
font-size: 1.4rem;
line-height: 3.5rem;
}


.s-w{
position: absolute;
left: 1rem;
top: 1rem;
width: 1.25rem;
height: 1.25rem;
background:red;
}

.d-list li{
width:100%;
padding: 1.2rem 0;
line-height: 1.67rem;
text-align: center;
border-bottom: 0.1rem solid #E0E0E0;
display: flex;
align-items: center;
}

.d-list li span{
width: 8.33rem;
height: 8.33rem;
border-radius: 0.67rem;
background: red;
margin-right: 1rem;
}

.d-list p{
color: rgba(16, 16, 16, 1);
font-size: 1.4rem;
font-family: PingFangSC-regular;
}

.d-list input{
margin:0 1.25rem;
width: 1.75rem;
height: 1.75rem;
background-color: rgba(255, 255, 255, 0);
border: 0.08rem solid rgba(217, 214, 214, 1);

}
.zong{
	height: 56.3rem;
	overflow: auto;
}

#shiy{
width: 100%;
}

.h-list ul{
background:#F5F7FA;;
width: 100%;
display: flex;
flex-wrap:wrap;
padding: 0 1rem;
justify-content: space-between;
align-items: center;
box-sizing: border-box;

}

.h-list .h-b-te{
width: 100%;
height: 2.5rem;
background-color: rgba(255, 255, 255, 0);
color: rgba(102, 102, 102, 1);
font-size: 1.4rem;
text-align: center;
line-height: 2.5rem;
font-family: Microsoft Yahei;
}

.h-list li{
width: 8rem;
height: 11rem;
color: rgba(16, 16, 16, 1);	
}

.h-list li .h-tu{
margin-left:0.4rem ;
width: 7.17rem;
height: 7.17rem;
border-radius: 0.67rem;
background-color: rgba(230, 230, 230, 1);
}
.h-desc{
overflow:hidden;
width: 8rem;
margin-top: 0.4rem;
line-height: 1.rem;
text-align: center;
font-family: Arial;

}
.h-desc span{

color: rgba(102, 102, 102, 1);
font-size: 1.17rem;
font-family: Microsoft Yahei;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap	
}

.h-desc p{
color: rgba(189, 189, 189, 1);
font-size: 1rem;
font-family: Microsoft Yahei;
}       
</style>


